import React, { lazy } from "react"
const Home = lazy(() => import("@/views/Home"))
const Login = lazy(() => import("@/views/Login"))
const About = lazy(() => import("@/views/About"))
const User = lazy(() => import("@/views/User"))
const Test = lazy(() => import("@/views/Test"))
// Navigate重定向组件
import { Navigate } from "react-router-dom"
const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)
const routes = [
    {
        path: "/",
        element: <Navigate to="/about" />
    },
    {
        path: "/",
        element: <Home />,
        children: [
            {
                path: "/about",
                element: withLoadingComponent(<About />)
            },
            {
                path: "/user",
                element: withLoadingComponent(<User />)
            },
            {
                path: "/test",
                element: withLoadingComponent(<Test/>)
            },
        ]
    },
    // {
    //     path: "/home",
    //     element: <Home />
    // },
    {
        path: "/login",
        element: <Login />
    },
    {
        path: "*",
        element: <Navigate to="/" />
    }
]
export default routes